{% include 'edit-user-modal.html' %}
<div>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Users list'|trans }}</h3>
  <div class='pl-3'>
    <div class='d-flex justify-content-between align-items-baseline'>
      <p>{{ 'Double-click a row in the table below to edit user.'|trans }}</p>
      {% if scriptName == 'admin.php' and (App.Users.userData.can_manage_users2teams or App.Config.configArr.admins_import_users) %}
        <div class='d-flex justify-content-between'>
          <label for='showAllUsers' class='col-form-label'>{{ 'Show users from all teams'|trans }}</label>
          <label class='switch ucp-align'>
            <input type='checkbox' autocomplete='off' data-trigger='change' data-custom-action='show-all-users' id='showAllUsers'>
            <span class='slider'></span>
          </label>
        </div>
      {% endif %}
    </div>
    {% if App.devMode -%}
    <!-- [html-validate-disable-block prefer-native-element, element-permitted-content, {{ App.Request.getScriptName|split('/')|last == 'admin.php' ? 'no-missing-references' }}: ag-grid] -->
    {%- endif %}
    <div id='users-table'></div>
  </div>
</div>

{% if App.Config.configArr.admins_create_users or App.Request.getScriptName|split('/')|last == 'sysconfig.php' %}
{# CREATE USER ACCOUNT #}
<h3 class='my-3 p-2 pl-3 section-title'>{{ 'Add account'|trans }}</h3>
<div class='pl-3'>
  <p class='smallgray'>{{ 'Note: new user will need to use the "Forgot password" button on the login page to set a password.'|trans }}</p>
  <form class='form-group' id='createUserForm'>
    <div class='row mb-2'>
      {# TEAM #}
      <div class='col-md-6'>
        <label for='create-user-team' class='col-form-label'>{{ 'Team'|trans }}</label>
        <select {{ App.Request.getScriptName|split('/')|last == 'admin.php' ? 'disabled' }} class='form-control custom-control-inline' name='team' id='create-user-team' data-no-blank='1'>
          {% for team in teamsArr %}
            <option value='{{ team.id }}' {{ App.Users.userData.team == team.id ? " selected='selected'" }}>{{ team.name }}</option>
          {% endfor %}
        </select>
      </div>

      {# GROUP #}
      <div class='col-md-6'>
        <label for='create-user-group' class='col-form-label'>{{ 'Permission group'|trans }}</label>
        <select class='form-control custom-control-inline' name='usergroup' id='create-user-group' data-no-blank='1'>
          {% if App.Users.userData.is_sysadmin %}
            <option value='1'>Sysadmins</option>
          {% endif %}
          <option value='2'>Admins</option>
          <option value='4' selected='selected'>Users</option>
        </select>
      </div>
    </div>
    <div class='row mb-2'>
      {# FIRSTNAME #}
      <div class='col-md-6'>
        <label for='firstname' class='col-form-label'>{{ 'Firstname'|trans }}</label>
        <input name='firstname' class='form-control' type='text' id='firstname' required />
      </div>

      {# LASTNAME #}
      <div class='col-md-6'>
        <label for='lastname' class='col-form-label'>{{ 'Lastname'|trans }}</label>
        <input name='lastname' class='form-control' type='text' id='lastname' required />
      </div>
    </div>

    <div class='row mb-2'>
      {# EMAIL #}
      <div class='col-md-12'>
        <label for='email' class='col-form-label'>{{ 'Email'|trans }}</label>
        <input name='email' class='form-control' type='email' id='email' required />
      </div>
    </div>

    {# SUBMIT #}
    <div class='col-md-12 text-center mt-2'>
      <button type='submit' data-action='create-user' id='initialCreateUserBtn' data-check-archived='1' class='btn btn-primary'>{{ 'Create'|trans }}</button>
    </div>
  </form>
  <div hidden class='box mb-3' id='archivedUsersFound'>
    <i class='fas fa-warning mr-1'></i><h5 class='d-inline'>{{ 'Found archived users with same email address:'|trans }}</h5>
    <ul id='archivedUsersFoundList' class='list-group mt-2'>
    </ul>
    <div class='text-center mt-2'>
      <button type='submit' data-action='create-user' data-check-archived='0' class='btn btn-primary'>{{ 'Create a new account anyway'|trans }}</button>
    </div>
  </div>
</div>
{% endif %}

{% if App.Config.configArr.admins_create_users_remote_dir %}
  {# CREATE USER ACCOUNT through remote API call #}
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Add account from external directory'|trans }}</h3>
  <div class='pl-3'>
    <form method='GET'>
      <input type='hidden' name='tab' value='3' />
      <div class='form-group'>
        <div class='row mb-2'>
          {# EMAIL #}
          <div class='col-md-12'>
            <label for='remote_dir_term' class='col-form-label'>{{ 'Search user'|trans }}</label>
            <input id='remote_dir_term' class='form-control' placeholder='ada.lovelace@math.example.edu' type='text' name='remote_dir_query' value='{{ App.Request.query.get('remote_dir_query') }}' />
          </div>
        </div>

        {# SEARCH #}
        <div class='col-md-12 text-center mt-2'>
          <button type='submit' class='btn btn-primary'>{{ 'Search'|trans }}</button>
        </div>
      </div>
    </form>

    {% if App.Request.query.has('remote_dir_query') %}
      <div class='mt-2'>
        <table class='table' id='remoteDirectoryUsersTable' aria-label='{{ 'Remote directory users list'|trans }}' data-table-sort='true'>
          <thead>
            <tr>
              <th scope='col'>{{ 'Selection'|trans }}</th>
              <th scope='col'>{{ 'Firstname'|trans }}</th>
              <th scope='col'>{{ 'Lastname'|trans }}</th>
              <th scope='col'>{{ 'Email'|trans }}</th>
              <th scope='col'>{{ 'Internal ID'|trans }}</th>
            </tr>
          </thead>
          <tbody>
            {% for user in remoteDirectoryUsersArr %}
              <tr>
                <td data-label='{{ 'Selection'|trans }}'><input {{ user.disabled ? "disabled='disabled'" }} type='checkbox' /></td>
                <td data-label='{{ 'Firstname'|trans }}'>{{ user.firstname }}</td>
                <td data-label='{{ 'Lastname'|trans }}'>{{ user.lastname }}</td>
                <td data-label='{{ 'Email'|trans }}'>{{ user.email }}</td>
                <td data-label='{{ 'Internal ID'|trans }}'>{{ user.orgid }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div class='col-md-12 text-center mt-2'>
          <div class='input-group'>
            {# team selection dropdown, disabled on admin page #}
            <div class='input-group-prepend'>
              <select class='custom-select brr-none' id='remoteUserTeam' {{ App.Request.getScriptName|split('/')|last == 'admin.php' ? 'disabled' }}>
                {% for team in teamsArr %}
                  <option value='{{ team.id }}' {{- App.Users.userData.team == team.id ? ' selected' }}>{{ team.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class='input-group-prepend'>
              <div class='input-group-text'>
                <input type='checkbox' class='mr-1' id='remoteUserIsAdmin'>{{ 'Admin'|trans }}
              </div>
            </div>
            <button type='button' data-action='create-user-from-remote' class='brl-none btn btn-primary'>{{ 'Add selected'|trans }}</button>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}
